<template>
    <div class="app-container">
      <!-- 条件框 -->
      <el-row :gutter="10">
          <el-col :span="4">
              <el-input @clear="clearName"  placeholder="请输入设备类型名称" v-model="PageDto.where.name" clearable> </el-input>
          </el-col>
          <el-col :span="4">
            <el-select @clear="clearIndustryId" v-model="PageDto.where.industryName" clearable filterable placeholder="请选择设备行业">
                <el-option
                  v-for="item in industryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select @clear="clearDeviceType" v-model="PageDto.where.deviceType" clearable placeholder="请选择设备类型">
                <el-option
                  v-for="item in deviceTypeList"
                  :key="item.deviceType"
                  :label="item.name"
                  :value="item.deviceType">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
              <el-button @click="PageDto.now=1;search()" type="success" icon="el-icon-search">搜索</el-button>
          </el-col>
           <el-col :span="2" offset="6">
              <el-button @click="add()" type="primary" icon="el-icon-plus">新增</el-button>
          </el-col>
      </el-row>
      <!-- 数据表格 -->
      <el-table :data="List" style="width: 100%" max-height="550" class="table" stripe>
        <el-table-column prop="name" label="设备类型名称" align="center"> </el-table-column>
        <el-table-column prop="industryName" label="所属行业" align="center"> </el-table-column>
        <el-table-column prop="companyName" label="设备类型" align="center"> 
          <template slot-scope="scope">
            <span :class="scope.row.deviceType | typeClassFormat">
              {{ scope.row.deviceType | deviceTypeFormat}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" align="center"> </el-table-column>
        <el-table-column prop="updateTime" label="修改日期" align="center"> </el-table-column>
        <el-table-column  label="操作" align="center"> 
          <template slot-scope="scope">
                <a @click.prevent="update(scope.row)">编辑</a>&nbsp;
                <a @click.prevent="delType(scope.row.id)">删除</a>
             </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="PageDto.now"
        layout="total,prev, pager, next, jumper"
        :total="total">
      </el-pagination>
  
      <!-- 新增对话框 -->
      <el-dialog title="添加设备类型" :visible.sync="dialogFormVisible" @closed="clearData">
        <el-row align="middle" type="flex"  class="dialogRow">
          <el-col :span="5" :push="1">
            设备类型名称:
          </el-col>
          <el-col :span="6">
          <el-input v-model="deviceType.name" autocomplete="off" placeholder="请输入设备类型名称"></el-input>
        </el-col>
        </el-row>
        <el-row align="middle" type="flex" class="dialogRow">
          <el-col :span="5" :push="1">
            设备所属行业:
          </el-col>
          <el-col :span="6" >
          <el-select @clear="clearDeviceType" v-model="deviceType.industryId" clearable placeholder="请选择所属行业">
                <el-option
                  v-for="item in industryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row align="middle" type="flex" justify="start" class="dialogRow">
          <el-col :span="5" :push="2">
            设备类型:
          </el-col>
          <el-col :span="6">
          <el-select @clear="clearDeviceType" v-model="deviceType.deviceType" clearable placeholder="请选择设备类型">
                <el-option
                  v-for="item in deviceTypeList"
                  :key="item.deviceType"
                  :label="item.name"
                  :value="item.deviceType">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false;saveAdd()">添 加</el-button>
    </div>
    </el-dialog>
  
      <!-- 编辑对话框 -->
      <el-dialog title="编辑设备类型" :visible.sync="dialogFormVisible1" @closed="clearData">
        <el-row align="middle" type="flex" justify="start" class="dialogRow">
          <el-col :span="5" :push="1">
            设备类型名称:
          </el-col>
          <el-col :span="6">
          <el-input v-model="deviceType.name" autocomplete="off" placeholder="请输入设备类型名称"></el-input>
        </el-col>
        </el-row>
        <el-row align="middle" type="flex" justify="start" class="dialogRow">
          <el-col :span="5" :push="1">
            设备所属行业:
          </el-col>
          <el-col :span="6" >
          <el-select @clear="clearDeviceType" v-model="deviceType.industryId" clearable placeholder="请选择所属行业">
                <el-option
                  v-for="item in industryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row align="middle" type="flex" justify="start" class="dialogRow">
          <el-col :span="5" :push="2">
            设备类型:
          </el-col>
          <el-col :span="6">
          <el-select @clear="clearDeviceType" v-model="deviceType.deviceType" clearable placeholder="请选择设备类型">
                <el-option
                  v-for="item in deviceTypeList"
                  :key="item.deviceType"
                  :label="item.name"
                  :value="item.deviceType">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible1 = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible1 = false;saveUpdate()">保 存</el-button>
    </div>
    </el-dialog>
  
    </div>
  </template>
  <script>
  //导入dept api
  import { page,add, update,del} from "@/api/deviceType";
  import { all} from "@/api/industry"
  //导入pcd组件
  // import PCD  from '../components/pcd.vue';
  export default {
    components: {
      // // PCD:PCD
      // PCD
    },
    data() {
      return {
        List: [],
        PageDto: {
          now: 1,
          size: 10,
          where:{
            name:"",
            industryId:"",
            deviceType:""
          }
          
        },
        pages: 0,
        total: 0,
        deviceTypeList:[{deviceType:1,name:'网关'},{deviceType:2,name:'传感器'},
                          {deviceType:3,name:'继电器'},{deviceType:4,name:'摄像头'}],
        industryList:[],
        deviceType:{},
        dialogFormVisible:false,
        dialogFormVisible1:false,
      };
    },
    methods: {
      handleCurrentChange(now) {
        this.PageDto.now = now;
        this.search();
      },
      search() {
        page(this.PageDto).then((res) => {        
          this.List = res.list;
        //   this.pages = res.pages;
          this.total = res.total;
        });
        all().then(res=>{
          this.industryList = res.data;
        })
      },
      add(){
        this.deviceType = {};
        this.dialogFormVisible = true;
        this.search();
      },
      saveAdd(){
        if (this.deviceType.id){
            update(this.deviceType).then((res) => {
                this.dialogFormVisible1 = false;
                this.PageDto.now = 1;
                this.search();
                this.deviceType = {};
            });
        }else{
            add(this.deviceType).then((res) => {
                this.pageDto.now = 1;
                this.dialogFormVisible1 = false;
                this.$message({
                    msg:res.message,
                    type:res.ok?'success':'error'
                });
                this.deviceType = {};
                this.search();
            })
        }
      },
      update(row){
        this.dialogFormVisible1 = true;
        this.deviceType = row;
        console.log(row)
      },
      saveUpdate(){
        update(this.deviceType).then(res=>{
          if(res.ok){
            this.search();
            this.$message.success(res.message)
          }else {
          this.$message.error(res.message)
          }
        })
      },
      delType(id) {
      this.$confirm("此操作将永久删除该设备, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        del(id).then((res) => {
          if (res.code == 200) {
            this.search();
          }
          this.$message({
            message: res.ok ? "删除成功" : "删除失败",
            type: res.code == 200 ? "success" : "error",
          });
        });
      });
    },
      clearData(){
        this.deviceType.id = "";
        this.deviceType.name = "";
        this.deviceType.industryId = "";
        this.deviceType.industryName = "";
        this.deviceType.deviceType = "";
      }
    },
    allType() {
        all().then((res) => {
        this.industryList = res.data;
      });
    },
    created() {
      this.search();
      this.allType();
    },
    filters:{
      deviceTypeFormat(source){
        let fDeviceType = '网关'
        if(source == 2){
          fDeviceType = '传感器'
        }
        else if(source == 3){
          fDeviceType = '继电器'
        }
        else if(source == 4){
          fDeviceType = '摄像头'
        }
        return fDeviceType
      },
      typeClassFormat(source){
        let fTypeClass = "ant-tag ant-tag-pink"
        if(source == 2){
          fTypeClass = "ant-tag ant-tag-orange"
        }
        else if(source == 3){
          fTypeClass = "ant-tag ant-tag-cyan"
        }
        else if(source == 4){
          fTypeClass = "ant-tag ant-tag-purple"
        }
        return fTypeClass
      }
    }
  };
  </script>
  
  <style>
  .dialogRow{
    margin-top:20px ;
  }
  a{
    color:blue
  }
  .ant-tag {
      box-sizing: border-box;
      margin: 0 8px 0 0;
      color: #000000d9;
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5715;
      list-style: none;
      font-feature-settings: "tnum";
      display: inline-block;
      height: auto;
      padding: 0 7px;
      font-size: 12px;
      line-height: 20px;
      white-space: nowrap;
      background: #fafafa;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
      opacity: 1;
      transition: all .3s;
  }
  .ant-tag-orange {
      color: #d46b08;
      background: #fff7e6;
      border-color: #ffd591;
  }
  .ant-tag-purple {
      color: #531dab;
      background: #f9f0ff;
      border-color: #d3adf7;
  }
  .ant-tag-pink {
      color: #c41d7f;
      background: #fff0f6;
      border-color: #ffadd2;
  }
  .ant-tag-cyan {
      color: #08979c;
      background: #e6fffb;
      border-color: #87e8de;
  }
  </style>